<template>
    <fieldset>
        <legend>登入页</legend>
        用户名:
        <input type="text" v-model="username">
        <br>
        密码:
        <input type="password" v-model="password" @keydown.enter="login"><br>
        <button @click="login">登录</button>
    </fieldset>
</template>

<script setup>
import {nextTick, onBeforeMount, ref} from "vue"
import * as api from "../../api/users"
import {onBeforeRouteLeave, onBeforeRouteUpdate, useRouter} from "vue-router"

    // 1、获取输入框中的用户名和密码
    let username = ref('')
    let password = ref('')

    // 2、发起请求，请求登入
    let router = useRouter()

    let login = async () =>{
        let res = await api.loginApi(username.value,password.value)
        
        // 服务器会返回token，这个token是个令牌，这个令牌需要保存在本地，
        // 后续请求的时候带上令牌，就能随意访问数据了

        // 1、localStorage 关掉页面，只要token还具备时效性，就能访问其他页面，不需要登录
        // 2、sessionStorage  用户关掉页面，token就会清除，不管token生不生效，重新打开页面，用户重新登录
        if(res.data.state){
            // 将token存到本地
            sessionStorage.setItem('qf-token',res.data.token)
            // 页面进行跳转
            router.push("/")

        }else{
            alert(res.data.msg)
        }
        
        console.log(res)
        
        
    }

    // 3、判定成功和失败的情况

    // 组件独享钩子
    // 在组合式api中没有此钩子
    // onBeforeRouteEnter(()=>{
        nextTick(vm=>{
            // 这个就是组件实例，afterEach之后回传回来的
            console.log(vm)
        })
    //     console.log('路由进入登录页面之前')
    // })

    onBeforeRouteLeave(()=>{
        console.log('路由离开登录页面')
    })

    onBeforeRouteUpdate(()=>{
        console.log('路由更新')
    })
</script>